<%@ page language="java" import="java.util.*" pageEncoding="ISO-8859-1"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<meta charset="UTF-8">
		<title>EXTJS4.0</title>
		<link rel="stylesheet" href="theme-crisp/resources/theme-crisp-all.css" />
		<script type="text/javascript" src="js/ext-all.js" ></script>
		<script type="text/javascript" src="js/TabCloseMenu.js"></script>
		<script type="text/javascript" src="js/theme-crisp.js" ></script>
		<script type="text/javascript" src="js/theme-crisp-debug.js" ></script>
		<script type="text/javascript" src="js/ext-lang-zh_CN.js" ></script>
	</head>

	<script>
		
        var northHtml = '<div><h1>&nbsp;&nbsp;&nbsp;<font color="#0075B0">商城管理系统</font></h1><div align="right" style="margin-top:-30px">你好：XXX，<a style="cursor:pointer;" onclick="loginout()"><font color="#0075B0">退出</font></a>&nbsp;&nbsp;&nbsp;</div></div>';
	
		//默认加载
		Ext.onReady(function () {
			//禁止整个页面的右键
            Ext.getDoc().on("contextmenu", function(e){
                 e.stopEvent();
            });
            
			var currentItem;
            //定义手风琴布局
            var accordion = Ext.create("Ext.panel.Panel", {
			    //这里是（accordion）手风琴布局
             	layout: "accordion",  //设置为手风琴布局
                layoutConfig: {
                    animate: true,
                    collapseFirst:true,
                },
                width: 200,
                minWidth: 100,
                region: "west", //设置方位 位于border布局的west
                collapsible: true,
                items: [
                            { 
                            	title: '功能管理',
                            	iconCls: "12",
			                    layout: 'fit',
			                    items: [
			                    {
			                        xtype: 'treepanel',
			                        id:'root',
			                        border: 0,
			                        lines:false,
			                        overflowX:"hidden",
			                        rootVisible: false,
			                        containerScroll : true,
			                        autoScroll:false,
			                        root: {
			                            expanded: true,
			                            children: [
			                               	{
			                               		id: 'root_2', 
			                               		text: '文章管理',
			                               		leaf: false,
			                               		children:[
			                               			{
			                               				id:'center.html',
			                               				text:"第一个center",
			                               				leaf: true,
			                               				
								                    },
								                    {
			                               				id:'center1.html',
			                               				text:"第二个center1",
			                               				leaf: true,
			                               				
								                    },
								                    {
			                               				id:'center2.html',
			                               				text:"第三个center2",
			                               				leaf: true,
			                               				
								                    },
								                    
			                               		],
			                               		
			                               	},
			                                { 
			                                	id: 'root_3', 
			                                	text: '标签管理', 
			                                	leaf: false, 
			                                	children:[
			                               			{
			                               				id:'test/test1.html',
			                               				text:"第一个center",
			                               				leaf: true,
			                               				
								                    },
								                    {
			                               				id:'test/test2.html',
			                               				text:"第二个center1",
			                               				leaf: true,
			                               				
								                    },
								                    {
			                               				id:'test/test3.html',
			                               				text:"第三个center2",
			                               				leaf: true,
			                               				
								                    },
								                    
			                               		],
			                                },
			                                { 
			                                	id: 'root_4', 
			                                	text: '用户管理', 
			                                	leaf: false,
			                                	children:[
			                               			{
			                               				id:'test/test4.html',
			                               				text:"第一个center",
			                               				leaf: true,
			                               				
								                    },
								                    {
			                               				id:'test/test5.html',
			                               				text:"第二个center1",
			                               				leaf: true,
			                               				
								                    },
								                    {
			                               				id:'test/test6.html',
			                               				text:"第三个center2",
			                               				leaf: true,
			                               				
								                    },
			                               		],
			                                }
			                            ],
			                            
			                        },
			                       listeners : {
							            	itemclick: function(node, event) {
							            	/*addTab();*/
							                /*event.stopEvent();*/
							                addTab(node,event);
							            }
							        }
			                    }],
			                    
                           	},
                            { 
                            	title: "面板二", 
                            	html: "面板二", 
                            	iconCls: "search" 
                            },
                            { 
                            	title: "面板三", 
                            	html: "面板三", 
                            	iconCls: "back" 
                            },
                            { 
                            	title: "面板四",
                            	html: "面板四", 
                            	iconCls: "12" 
                            },
                            { 
                            	title: "面板五", 
                            	html: "面板五", 
                            	iconCls: "12" 
                            },
                            { 
                            	title: "面板六", 
                            	html: "面板六", 
                            	iconCls: "12" 
                            },
                            
                       ],
            });
            //north  头部
            var northSes = Ext.create("Ext.panel.Panel",{
            	title: '&nbsp',
            	html:northHtml,
            	region: "north", 
            	height: 85, 
            	collapsible: false ,
            });
            
            //center 中间
            var centerSes = Ext.create("Ext.TabPanel",{
            	region: 'center',  
	            xtype: 'tabpanel',  
	            activeItem: 0,  
	            deferredRender : false,  
		        activeTab : 0,  
		        resizeTabs:true,
	            enableTabScroll : true ,
	            items:{title: '首页',html: '这里是首页正文内容'},
                plugins:[
                	Ext.create('Ext.ux.TabCloseMenu', {
			            closeTabText: '关闭当前',
			            closeOthersTabsText: '关闭其他',
			            closeAllTabsText: '关闭所有'
			        })
                ]	       
            });
            
            //整体布局采用border
            new Ext.Viewport({
                layout: "border", //这里是（border）边界布局
                defaults: {
                    bodyStyle: "background-color: #FFFFFF;",
                    frame: true
                },
                
                items: [
                     accordion, 
                     northSes,
                     centerSes,
                ],
            });
            
        	//添加选项卡
	        function addTab(node,r){
	        	var n = centerSes.getComponent(r.id);  
	        	
             	if(r.id=='root' || r.id=='root_2' || r.id=='root_3' || r.id=='root_4'){  
                	return;  
             	}  
	            if (!n) { // 判断是否已经打开该面板  
	                n = centerSes.add({  
	                    'id' : r.id,  
	                    'title' : node.highlightedItem.textContent,  
	                     closable : true, // 通过html载入目标页  
	                     html : '<iframe scrolling="auto" frameborder="0" width="100%" height="100%" src="'+r.id+'"></iframe>'  
	                });  
	            }  
	        	centerSes.setActiveTab(n);
	        }
	        
	        
        });
        
      	//退出按钮
      	function loginout(){
      		Ext.MessageBox.confirm("提示信息","你确定要退出吗？",function(btn){
      			if(btn == "yes"){
      				Ext.MessageBox.alert("提示信息","退出成功");
      			}
      		},this);
      	}
	</script>
	
	<body>
		
		
	</body>
</html>
